<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout">
<head>
<title>专题管理</title>
</head>
<body>
<div layout:fragment="content">
	<div class="row">
		<div class="col-md-12">
			<div class="btn-group pull-right">
				<a href="index.html" th:href="@{/promotion/topic/index/}" id="link_return" class="btn green">返回<i class="fa fa-arrow-circle-o-left"></i></a>
			</div>
		</div>
	</div>
    <div class="row">&nbsp;</div>
	<!-- BEGIN CONTAINER -->
    <div class="portlet box blue" id="form_wizard_1">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-gift"></i> 专题添加- <span class="step-title">
                第三步</span>
            </div>
        </div>
        <div class="portlet-body form">
            <form th:action="@{/promotion/topic/updateModules}" th:object="${topic}" class="form-horizontal" id="form_topic_edit" method="POST">
                <input type="hidden" id="hidden_id" th:field="*{id}" />
                <input type="hidden" id="hidden_step" name="step"/>
                <div class="form-wizard">
                    <div class="form-body">
                        <ul id="category" class="nav nav-pills nav-justified steps">
                            <li>
                                <a href="#tab1" data-toggle="tab" class="step">
                                <span class="number">
                                1 </span>
                                <span class="desc">
                                <i class="fa fa-check"></i>通用信息</span>
                                </a>
                            </li>
                            <li>
                                <a href="#tab2" data-toggle="tab" class="step">
                                <span class="number">
                                2 </span>
                                <span class="desc">
                                <i class="fa fa-check"></i>内容</span>
                                </a>
                            </li>
                            <li class="active">
                                <a href="#tab3" data-toggle="tab" class="step active">
                                <span class="number">
                                3 </span>
                                <span class="desc">
                                <i class="fa fa-check"></i>专题模块</span>
                                </a>
                            </li>
                            <li>
                                <a href="#tab4" data-toggle="tab" class="step">
                                <span class="number">
                                4 </span>
                                <span class="desc">
                                <i class="fa fa-check"></i>设置商品</span>
                                </a>
                            </li>
                        </ul>
                        <div id="bar" class="progress progress-striped" role="progressbar">
                            <div class="progress-bar progress-bar-success" style="width: 75%;">
                            </div>
                        </div>
                        <div class="tab-content">
                            <div class="tab-pane" id="tab3">
                                <div class="row">
                                    <div class="col-md-1"></div>
                                    <div class="col-md-5">
                                        <input type="hidden" id="hidden_topicCategoryId" />
                                        <div class="form-group">
                                            <label class="control-label col-md-3">模块名称</label>
                                            <div class="col-md-6">
                                                <input type="hidden" id="hidden_topicCategoryIndex" />
                                                <input type="text" id="text_topicCategoryName" name="tempName" class="form-control" placeholder="模块名称" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">商品数量</label>
                                            <div class="col-md-6">
                                                <input type="text" id="text_topicCategoryGoodsNum" name="tempNum" class="form-control" placeholder="商品数量" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">排序</label>
                                            <div class="col-md-6">
                                                <input type="text" id="text_topicCategoryDisplayOrder" name="tempDisplayOrder" class="form-control" placeholder="排序" value="100"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">广告位</label>
                                            <div class="col-md-6">
                                                <select id="select_topicCategoryAd" class="form-control" name="tempAdId">
                                                    <option value="0">请选择广告位</option>
                                                    <option th:each="adPosition:${adPositionList}" th:value="${adPosition.id}" th:text="${adPosition.adPositionName}"></option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-md-offset-3">
                                                <button id="btn_createTopicCategory" class="btn btn-success" type="button">保存模块</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="col-md-12">
                                            <table id="topicCategoryTable" class="table table-striped table-bordered  table-advance table-hover">
                                                <tr>
                                                    <th width="20%">模块名称</th>
                                                    <th width="20%">商品数量</th>
                                                    <th width="20%">排序</th>
                                                    <th width="20%">广告位</th>
                                                    <th width="20%">操作</th>
                                                </tr>
                                                <tr th:each="topicModule:${topic.topicModuleList}">
                                                    <td class="tagsinput"><span class="badge badge-success" th:text="${topicModule.name}"></span></td>
                                                    <td th:text="${topicModule.goodsNum}"></td>
                                                    <td th:text="${topicModule.displayOrder}"></td>
                                                    <td><span th:text="${topicModule.adPosition} ? ${topicModule.adPosition.adPositionName} : '无'"></span><input type='hidden' th:value="${topicModule.adPosition} ? ${topicModule.adPosition.id} : '0'" /></td>
                                                    <td><a class='edit' href='javascript:void(0)'>编辑</a> <a class='delete' href='javascript:void(0)'>删除</a><input type="hidden" th:value="${topicModule.id}" /></td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions fluid">
                        <div class="row">
                            <div class="col-md-12">
                                <div id="button_group" class="col-md-offset-3 col-md-9">
                                    <a id="btn_prev" href="javascript:;" class="btn green button-previous">
                                    <i class="m-icon-swapleft"></i>上一步</a>
                                    <a id="btn_next" href="javascript:;" class="btn blue button-next">
                                    下一步<i class="m-icon-swapright m-icon-white"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

<script th:inline="javascript">
    /*<![CDATA[*/


    $(document).ready(function () {

         $("#category li a").each(function () {

            $(this).bind("click", function () {
                var step = $(this).children(".number").text().trim();
                $("#hidden_step").val(step);
                generateForm();
                document.forms[0].submit();
            });

        });

        $("#tab3").show();

        //专题模块 创建模块按钮 添加事件
        $("#btn_createTopicCategory").bind("click", function () {
            var name = $("#text_topicCategoryName").val();
            var goodsNum = $("#text_topicCategoryGoodsNum").val();
            var displayOrder = $("#text_topicCategoryDisplayOrder").val();
            var adName = $("#select_topicCategoryAd option:selected").text();
            var adId = $("#select_topicCategoryAd option:selected").val();
            if(adId == 0) {
                adName = "无";
            }
            var moduleId = $("#hidden_topicCategoryId").val();

             //创建模块
            var checker = validate.form();
            if (checker) {
                var $trNode = $("<tr style='background:white;'><td class='tagsinput'><span class='badge badge-success'>" + name + "</span></td><td>" + goodsNum + "</td><td>" + displayOrder + "</td><td>" + adName + "<input type='hidden' value='" + adId + "' />" + "</td><td><a class='edit' href='javascript:void(0)'>编辑</a> <a class='delete' href='javascript:void(0)'>删除</a><input type='hidden' value='" + moduleId + "' /></td></tr>");
                if ($("#hidden_topicCategoryIndex").val().trim() == "") {
                    $("#topicCategoryTable").append($trNode);
                } else {
                    $trNode.addClass("success");
                    $("#topicCategoryTable tr:eq(" + $("#hidden_topicCategoryIndex").val() + ")").replaceWith($trNode);
                }

                $("#text_topicCategoryName").val("");
                $("#text_topicCategoryGoodsNum").val("");
                $("#text_topicCategoryDisplayOrder").val("100");
                $("#hidden_topicCategoryIndex").val("");
                $("#hidden_topicCategoryId").val("");
                $("#select_topicCategoryAd option:eq(0)").attr("selected", "selected");
            }

        });



        //专题模块 模块表格删除添加事件
        $(".delete").live("click", function () {
            var $deleteNode = $(this);
            var deleteIndex = 0;
            bootbox.confirm("您确定删除吗?", function(result) {
                if(result) {
                    var deleteId = $deleteNode.parent().children("input:eq(0)").val().trim();
                    if(deleteId != ""){
                        $("#topicCategoryTable").append($("<input type='hidden' name='deleteIdList["+deleteIndex+"]' value='"+deleteId+"'/>"));
                        deleteIndex++;
                    }
                    $deleteNode.parent().parent().remove();
                }
            });

        });

        //专题模块 模块表格编辑添加事件
        $(".edit").live("click", function () {

            $(this).parent().parent().addClass("danger");
            var name = $(this).parent().parent().children("td:eq(0)").text();
            var goodsNum = $(this).parent().parent().children("td:eq(1)").text();
            var displayOrder = $(this).parent().parent().children("td:eq(2)").text();
            var adName = $(this).parent().parent().children("td:eq(3)").text();
            var moduleId = $(this).parent().children("input").val();
            var index = $(this).parent().parent().prevAll().length;

            $("#text_topicCategoryName").val(name);
            $("#text_topicCategoryGoodsNum").val(goodsNum);
            $("#text_topicCategoryDisplayOrder").val(displayOrder);
            $("#hidden_topicCategoryIndex").val(index);
            $("#hidden_topicCategoryId").val(moduleId);
            $("#select_topicCategoryAd option:contains(" + adName + ")").attr("selected", "selected");

        });

        var validate = $("#form_topic_edit").validate({
            rules:{
                tempName:{
                    required:true,
                    maxlength:100
                },
                tempNum: {
                    required: true,
                    digits: true,
                    min:0,
                    max:200
                },
                tempDisplayOrder: {
                    required: true,
                    digits:true,
                    min:0,
                    max:254
                }
            },
            messages:{
                tempName:{
                    required:"请输入模块名称",
                    maxlength:"最大不能超过100个字符"
                },
                tempNum: {
                    required: "请输入商品数量"
                },
                tempDisplayOrder: {
                    required: "请输入排序"
                }
            }
        });

        function generateForm() {
            $("#topicCategoryTable tr:gt(0)").each(function(){
                var index = $(this).index() - 1;
                var $hidden = $("<input type='hidden'/>");
                var $td1 = $(this).children("td:eq(0)");
                $td1.append($hidden.clone().attr("name","topicModuleList["+index+"].name").val($td1.text()));
                var $td2 = $(this).children("td:eq(1)");
                $td2.append($hidden.clone().attr("name","topicModuleList["+index+"].goodsNum").val($td2.text()));
                var $td3 = $(this).children("td:eq(2)");
                $td3.append($hidden.clone().attr("name","topicModuleList["+index+"].displayOrder").val($td3.text()));
                var $td4 = $(this).children("td:eq(3)");
                $td4.children("input").attr("name","topicModuleList["+index+"].adPositionId");
                var $td5 = $(this).children("td:eq(4)");
                $td5.children("input").attr("name","topicModuleList["+index+"].id");
            });
        }

        $("#btn_next").bind("click", function () {
            $("#hidden_step").val("4");
            generateForm();
            document.forms[0].submit();
        });
        $("#btn_prev").bind("click", function () {
            $("#hidden_step").val("2");
            generateForm();
           document.forms[0].submit();
        });
    });
    /*]]>*/
</script>